<template>
  <div class="mt-20">
    <!-- 数据表格 -->
    <PageTable
      :loading="loading"
      :data="dataSource"
      :columns="columns"
      :options="options"
      @selectChange="selectChange"
    />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="handleList"
    />
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
export default {
  name: 'BillTable',
  data() {
    return {
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,

      // 表格加载
      loading: false,
      // 表格配置
      options: {
        border: true,
        select: true
      },
      statusObj: {
        '-1': '已取消',
        0: '待付款',
        10: '待发货',
        20: '已发货',
        30: '已完成(确认收货)',
        31: '已评价',
        40: '已关闭'
      },
      selectList: [],
      // 表格列
      columns: [
        {
          props: 'orderNo',
          label: '订单号',
          width: '260px',
          render: (h, { row }) => {
            return (
              <div style={'text-align: left'}>
                <p style={'color:#1989FA;cursor: pointer'}>订单编号：{row.orderNo}</p>
                <p>支付流水号：{row.payCode}</p>
                <p>所属供应商：{row.supplierName}</p>
              </div>
            )
          }
        },
        {
          prop: 'orderDesc',
          label: '订单类型',
          render: (h, { row }) => {
            return <div>{row.orderDesc}</div>
          }
        },
        {
          prop: 'payDesc',
          label: '支付类型'
        },
        {
          prop: 'orderCash',
          label: '订单总额',
          render: (h, { row }) => {
            return <div>{`￥${row.orderCash || 0}+${row.orderIntegral || 0}积分`}</div>
          }
        },
        {
          prop: 'orderCashEnd',
          label: '订单实付',
          render: (h, { row }) => {
            return <div>{`￥${row.orderCashEnd || 0}+${row.orderIntegralEnd || 0}积分`}</div>
          }
        },
        {
          prop: 'platformAmount',
          label: '平台服务费',
          render: (h, { row }) => {
            return <div>￥{row.platformAmount || 0}</div>
          }
        },
        {
          prop: 'costAmount',
          label: '交易手续费',
          render: (h, { row }) => {
            return <div>￥{row.costAmount || 0}</div>
          }
        },
        {
          prop: 'Dispositon',
          label: '入账平台',
          render: () => {
            return <div>微信商户平台</div>
          }
        },
        {
          prop: 'createdTime',
          label: '下单/入账时间',
          width: '140px',
          render: (h, { row }) => {
            return (
              <div>
                <div>{row.createdTime || '暂无'}</div>至<div>{row.createdTime || '暂无'}</div>
              </div>
            )
          }
        },
        {
          prop: 'orderStatus',
          label: '订单状态',
          render: (h, { row }) => {
            return (
              <div>
                <p>{this.statusObj[row.orderStatus]}</p>
              </div>
            )
          }
        }
      ],
      // 表格源数据
      dataSource: [],
      params: {}
    }
  },
  methods: {
    handleList() {
      this.handleCashList(this.params)
    },
    // 获取兑换列表
    async handleCashList(obj) {
      this.params = obj
      const params = {
        ...this.listQuery,
        ...obj
      }
      const {
        data: { records, total }
      } = await this.$http.integral.cashSettlementApi.getCashList(params)
      this.dataSource = records
      this.total = total
    },

    // 选择列
    selectChange(list) {
      this.selectList = list
    },

    //导出
    async exportFile(type, obj, tabs) {
      if (type === 'part') {
        if (!this.selectList.length) return this.$message.error('请选择要导出的数据！')
        const title = tabs.find(item => item.key === obj.supplierId)?.label
        this.handleExport(this.selectList, title)
      }
      if (type === 'all') {
        for (const item of tabs) {
          const title = item.label
          const params = {
            pageNo: 1,
            pageSize: 1000,
            ...obj,
            supplierId: item.key
          }
          const {
            data: { records }
          } = await this.$http.integral.cashSettlementApi.getCashList(params)
          if (records.length) this.handleExport(records, title)
        }
      }
    },

    handleExport(selectList, title) {
      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      headerData.splice(1, 0, '支付流水号')
      headerData.splice(2, 0, '所属供应商')

      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      filterData.splice(1, 0, 'payCode')
      filterData.splice(2, 0, 'supplierName')

      const list = this.$lodash.cloneDeep(selectList)
      const tableData = list.map(item => {
        item.orderCashEnd = `￥${item.orderCashEnd || 0}+${item.orderIntegralEnd || 0}积分`
        item.orderCash = `￥${item.orderCash || 0}+${item.orderIntegral || 0}积分`
        item.platformAmount = item.platformAmount || 0
        item.costAmount = item.costAmount || 0
        item.Dispositon = '微信商户平台'
        item.createdTime = `${item.createdTime || '暂无'}至${item.createdTime || '暂无'}`
        item.orderStatus = this.statusObj[item.orderStatus]
        return item
      })
      export2Excel(headerData, tableData, filterData, `现金核算对账单-${title}明细`, () => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>
